import React, { Component } from 'react';
import { Input } from 'antd'
import { SearchOutlined, DeleteFilled, LeftOutlined } from '@ant-design/icons'
import { good_hotsearch } from '../utils/api'
import './search.scss'
class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: ['sk2', '兰蔻', '香水', '科颜氏'],
            searchkey: '',
            arr1: []
        }
    }
    componentDidMount() {
        good_hotsearch().then((res) => {
            // console.log(res.data)
            this.setState({
                arr1: res.data.list
            })
        })
    }
    render() {
        return (
            <div className='sousuo'>
                <div className="title_r">
                    <LeftOutlined onClick={this.back} />
                    <h1>搜索</h1>
                    <span>......</span>
                </div>
                <div className="search_r">
                    <Input type="text" name='arr' prefix={<SearchOutlined className='font' />} placeholder='搜索店铺内商品' onKeyUp={this.handclick} autoFocus />
                    <span className='call'>取消</span>
                </div>
                <div className="recent">
                    <h3>最近搜索</h3>
                    <DeleteFilled />
                </div>
                <div className="count">
                    {this.state.arr.map((item, index) => {
                        return <span key={index}>{item}</span>
                    })}

                </div>
                <div className="recent">
                    <h3>热门搜索</h3>
                </div>
                <div className="count">
                    {this.state.arr1.map((item, index) => {
                        return <span key={index}>{item}</span>
                    })}

                </div>
            </div>
        );
    }
    back = () => {
        this.props.history.push('/index')
    }
    handclick = (e) => {
        var key = e.keycode || e.which || e.charCode
        this.setState({
            searchkey: e.target.value,
        })
        if (key == 13) {
            this.props.history.push({ pathname: '/searchgood', state: { searchkey: this.state.searchkey } })
        }
    }
}


export default Search;